<template lang="">
    <div>
        城市：
        <table>
            <tr>
                <td v-for='i in citylist'>
                    <button @click='changecity(i.id)' :class="i.id == cityid?'active':''">{{i.name}}</button>
                    
                </td>
            </tr>
        </table>
        
        商品信息
        <table>
            <tr>
                    <td></td>
                    <td></td>
                    <td></td>
            </tr>
            <tr v-for='i in sceniclist'>
                    <td>{{i.title}}</td>
                    <td></td>
                    <td></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data(){
        return{
            citylist:[],
            sceniclist:[],
            cityid:0,
        }
    },
    methods: {
        //获取城市信息
        getcitylist(){
            this.axios.get('citym').then(res=>{
                this.citylist = res.data.list
            })
        },
        //获取景点信息
        getsceniclist(){
            this.axios.get('prom?cityid='+this.cityid).then(res=>{
                this.sceniclist = res.data.list
            })
        },
        //点击城市，展示城市下的景点
        changecity(id){
            this.cityid = id
            this.getsceniclist()
        },
        priceorder(){
            if(this.sort == 'asc'){
                this.sort = 'desc'
            }else{
                this.sort = 'asc'
            }
            this.getsceniclist()
        }
    },
    mounted() {
        this.getcitylist()
        this.getsceniclist()
    },
}
</script>
<style lang="">
.active{
    background-color: aqua;
}
</style>